<template>
    <a-modal :open="modelValue" title="账号登录" @cancel="onCancel" :footer="null">
        <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
            <a-form-item label="账号" name="account" :rules="[{ required: true, message: 'Please input your username!' }]">
                <a-input v-model:value="formState.account" />
            </a-form-item>
            <a-form-item label="密码" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
                <a-input-password v-model:value="formState.password" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                <a-button type="primary" html-type="submit" :loading="loading">登录</a-button>
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useAppStore } from "@/store";
import { message } from "ant-design-vue";

const appStore = useAppStore();

interface FormState {
    account: string;
    password: string;
    channel: string;
    host: string;
}
defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
});
const emits = defineEmits(["update:modelValue"]);

const loading = ref(false);
const formState = reactive<FormState>({
    account: "18180045056",
    password: "ywc123.456",
    channel: "102761",
    host: "tw.midjourney9.com",
});

const onCancel = () => {
    emits("update:modelValue", false);
};

const onFinish = async () => {
    loading.value = true;
    try {
        await appStore.login(formState);
        message.success("登录成功");
        onCancel();
    } catch (error) {
        message.error("登录失败");
    } finally {
        loading.value = false;
    }
};

const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
};
</script>
